<template>
  <div class="home">
    <!-- 标题区域 -->
    <van-nav-bar title="首页"> </van-nav-bar>
    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <!-- 搜索区域 -->
    <van-search
      v-model="value"
      shape="round"
      background="red"
      placeholder="请输入搜索商品关键词"
      @click="serachshop"
    />
    <!-- 轮播图区域 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in pricedata" :key="item.id">
          <img :src="item.imgurl" style="width: 100%; height: 200px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格区域 -->
    <van-grid :column-num="4">
      <van-grid-item
        v-for="value in GridData"
        :key="value"
        :icon="value.imgurl"
        :text="value.text"
        @click="getdetail(value.id, value.text)"
      />
    </van-grid>
    <!-- 分割线 -->
    <van-divider
      :style="{ color: 'red', borderColor: 'red', padding: '0 16px' }"
    >
      推荐商品
    </van-divider>
    <!-- 推荐商品 -->
    <div class="shopping-list">
      <van-list
        :v-model:loading="loading"
        :finished="finished"
        finished-text="暂无更多好货了"
        @load="onLoad"
        :immediate-check="false"
        offset="1"
      >
        <ul>
          <li
            v-for="item in recommendList"
            :key="item.id"
            @click="godetails(item.id)"
          >
            <img :src="item.imgurl" style="width: 160px; height: 120px" />
            <van-text-ellipsis rows="2" :content="item.title" />
            <p>
              <span style="color: red">惊爆价￥{{ item.price }}</span>
              <del style="color: #ccc; font-size: 14px"
                >原价：￥{{ item.nowprice }}</del
              >
            </p>
          </li>
        </ul>
      </van-list>
    </div>
    <!-- 回到顶部 -->
    <van-back-top
      right="10vw"
      bottom="10vh"
      style="color: white; background-color: red"
    />
  </div>
</template>
<script>
import router from "@/router";
import request from "@/utils/request";

export default {
  name: "home",
  async created() {
    const result = await request.get("/user/swipe");
    const result1 = await request.get("/good/recommend");
    this.pricedata = result.data.swipedata;
    this.recommendList = result1.data.recommendgood;
  },
  data() {
    return {
      pricedata: [],
      GridData: [
        {
          imgurl: "../../images/Grid1.png",
          text: "家局生活",
          id: 1,
        },
        {
          imgurl: "../../images/Grid2.png",
          text: "清洁专区",
          id: 2,
        },
        {
          imgurl: "../../images/Grid3.png",
          text: "厨房优选",
          id: 3,
        },
        {
          imgurl: "../../images/Grid4.png",
          text: "9.9专区",
          id: 4,
        },
        {
          imgurl: "../../images/Grid5.png",
          text: "吃货一族",
          id: 5,
        },
        {
          imgurl: "../../images/Grid6.png",
          text: "精品专区",
          id: 6,
        },
        {
          imgurl: "../../images/Grid7.png",
          text: "美状个护",
          id: 7,
        },
        {
          imgurl: "../../images/Grid8.png",
          text: "2元专区",
          id: 8,
        },
      ],
      recommendList: [],
    };
  },
  methods: {
    // 跳转网格商品详情页
    getdetail(id, text) {
      router.push({ path: "/gridshop", query: { id: id, text: text } });
    },
    // 跳转详情页
    godetails(id) {
      router.push({ path: "/details", query: { categoryid: id } });
    },
    // 搜索商品
    serachshop() {
      router.push("/search");
    },
  },
};
</script>
<style lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  .shopping-list {
    width: 100%;
    margin-bottom: 50px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      padding-bottom: 50px;
      li {
        width: 175px;
        height: 202px;
        padding: 3px;
        background-color: #fff;
        margin: 20px 0;
        text-align: center;
        // border: 1px solid;
      }
    }
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
